<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box1{
            width: 100px;
            height: 100px;
            background-color: #99ff99;
        }
    </style>
    <script>
        window.onload=function () {
            //点击按钮btn01之后读取box1的样式
            var box1=document.getElementById("box1");
            var btn01=document.getElementById("btn01");
            btn01.onclick=function () {
                // alert("hello");
                //         alert(box1.currentStyle.width);
            //             alert(box1.currentStyle.backgroundColor);//仅获取box1的当前样式 限域IE
              var obj=getComputedStyle(box1,null);
              // alert(obj.width);// 获取box1当前样式
                alert(getStyle(box1,"width"));
             };
        };
        //获取当前元素的方法
        function getStyle(obj,name) {
            // if (window.getComputedStyle){
            //     //正常浏览器的方式 具有getComputedStyle()的方法
            //     return getComputedStyle(obj,null)[name];
            // }else {
            //     //IE8用
            //     return  obj.currentStyle[name];
            // }//第一种方式 也可以用下面的三元运算符 ture?语句1：语句2
            return window.getComputedStyle?getComputedStyle(obj,null)[name]:obj.currentStyle[name];
        }
    </script>
</head>
<body>
<script>
    /*1.获取当前元素的样式 仅用于IE
    *   语法: 元素.currentStyle.样式名 可以读取当前元素正在显示的样式 仅用于IE
    *   如果获取的样式名没有设置 则返回auto 比如没有设置width 它不会获取到auto
    * 2.获取当前元素的样式 其他浏览器的
    *   getComputedStyle()这个方法来获取元素当前样式 这个方法是window方法，可以直接使用
    *   需要2个参数 2.1要获取样式的元素
    *              2.2可以传递一个伪元素 一般都用null
    *       该方法会返回一个对象。对象中封装了当前元素对应的样式 可以通过对象.样式名来读取样式
    *       如果获取的样式没有设置，则会获取真实的值，而不是默认值
    *       比如没有设置width 它不会获取到auto 而是获取到一个长度的值
    * 3.定义一个函数用来获取指定元素的当前样式
    *       参数 obj要获取元素的样式
    *           name要获取元素的样式名
    * function getStyle(obj,name){
    *     return  getComputedStyle(obj,null)[name];// 如果是,name 就写死了 [name]表示一个变量 可以是
    *       }}
    * getComputedStyle()和元素.currentStyle()调取的样式是只读的 不能修改 如果要修改 必须通过style属性
    * */
</script>
<button id="btn01">点我一下</button>
<div id="box1" ></div>
</body>
</html>